$(function() {
    $(".nav_ a").hover(function() {
        $(this).css("background", "rgb(237, 20, 117)").siblings().css("background", "")
    }, function() {
        $(this).css("background", "")
    })

    $(".header_top_left .logo").hover(function() {
        console.log(666);
        $(this).css("color", "red").siblings().css("color", "")
    }, function() {
        $(this).css("color", "")
    })

    $(".top").hover(function() { //鼠标移入
        console.log(666);
        $("#shadow").show();
        $("#big").show();

    }, function() { //鼠标移出
        $("#shadow").hide();
        $("#big").hide();
    })

    $(".top").mousemove(function(e) {

        let x = e.clientX - $("#shadow").width() / 2 - $(".left").offset().left;
        let y = e.clientY - $("#shadow").height() / 2 - $(".left").offset().top;
        // console.log(x, y);

        let maxX = $(".top").width() - $("#shadow").width();
        let maxY = $(".top").height() - $("#shadow").height();



        if (x <= 0) {
            x = 0;
        }
        if (y <= 0) {
            y = 0;
        }

        if (x >= maxX) {
            x = maxX;
        }
        if (y >= maxY) {
            y = maxY;
        }

        //x:400 = ?:800
        let bigImgX = $("#bigimg").width() * x / $(".top").width();
        let bigImgY = $("#bigimg").height() * y / $(".top").height();

        let bigX = x - ($("#big").width() / 2 - $("#shadow").width() / 2);
        let bigY = y - ($("#big").height() / 2 - $("#shadow").height() / 2);



        $("#shadow").css({
            left: x,
            top: y
        })

        $("#bigimg").css({
            left: -bigImgX,
            top: -bigImgY
        })

        $("#big").css({
            left: bigX,
            top: bigY
        })


    })

    $("#buy").click(function() {
        //登录的人 买商品
        //先判断 有没有登录
        let userid = window.localStorage.getItem("user");
        console.log(userid);
        if (userid) {
            //存userid goodsid  goodsname  goodsprice  buynum  goodsimg
            $.ajax({
                type: "get",
                url: "../php/addToCart.php",
                data: {
                    userid: userid,
                    goodsid: id,
                    goodsname: $("#buy").data("goodsname"),
                    goodsprice: $("#buy").data("goodsprice"),
                    buynum: $("#buynum").val() * 1,
                    goodsimg: $("#smallimg").attr("src")
                },
                dataType: "json"
            }).then(res => {
                console.log(res);
                if (res.status) {

                    if (confirm("是否马上进入购物车结算")) {
                        window.location.href = "../html/shoppingcar.html";
                    } else {

                        window.location.href = "../html/goodslist.html";

                    }


                } else {
                    alert("新增失败");
                }
            })


        } else {
            alert("请先登录")
            window.localStorage.setItem("backurl", window.location.href);
            //存起来

            window.location.href = "login.html";


        }




    })
})

let str = window.location.search; //表示参数区域
console.log(str);

if (str.indexOf("id") == -1) { //没有参数
    window.location.href = "list.html";
}
let id = str.split("=")[1];


//根据id获取数据
$.ajax({
    type: "get",
    url: "../php/datail.php",
    data: {
        id
    },
    dataType: "json",
}).then(function(res) {
    console.log(res);
    if (res.status) {
        let info = res.data; //是一个对象
        console.log(info);
        $("#goodsname").html(info.goodsname);



        $("#goodsprice").html("价格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp" + info.goodsprice);


        let goodsList1 = info.bigPicList;

        let goodsList2 = info.smallPicList.split("|");
        console.log(goodsList1);

        $("#smallimg").attr("src", goodsList1);


        for (var i = 0; i < goodsList2.length - 1; i++) {
            var smallimg = goodsList2[i]
            console.log(smallimg);
            $("#bigimg").attr("src", smallimg);

        }



        $("#buy").data("goodsprice", info.goodsprice);

        $("#buy").data("goodsname", info.goodsname);


        $(".nav").html(goodsList2.map(item => `<div class="item">
                <img
                    src=${item}>
            </div>
        `).join(""))


    }

})








$(document).on("mouseover", ".nav .item", function() {
    let imgSrc = $(this).find("img").attr("src");

    $("#smallimg").attr("src", imgSrc.replace("62x62", "400x400"));

    $("#bigimg").attr("src", imgSrc.replace("62x62", "400x400"));

})